<template>
  <div>
    <!-- <div>
      <UserInfoComp><div>电影排片</div></UserInfoComp>
    </div> -->

    <!-- 页面内容 -->
    <div>
      <!-- search -->
      <div>
        <el-form :inline="true" class="query-form">
          <el-form-item>
            <el-date-picker
              v-model="searchInfo.date"
              type="date"
              value="YYYY-MM-DD"
              placeholder="请选择日期"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button v-model="searchInfo.mid" @click="filmSelect">{{ btnFilmSelect }}</el-button>
          </el-form-item>

          <el-form-item>
            <el-button-group>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="danger" @click="reseet">重置</el-button>
            </el-button-group>
            <el-button @click="showadd" type="success" style="margin-left: 1rem">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- info -->
      <div>
        <el-table :data="filmPlayList">
          <el-table-column label="电影名称" width="">
            <template #default="scope">
              <span>{{ scope.row.movie.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="播放大厅名称" prop="hall" width=""></el-table-column>
          <el-table-column label="放映时间" width="">
            <template #default="scope">
              {{ tools.formatDate(scope.row.startTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button @click="showmodify(scope.row)" type="warning" size="small">修改</el-button>
              <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- page -->
      <div class="page">
        <el-pagination
          v-model:current-page="pageInfo.pageNumber"
          v-model:page-size="pageInfo.pageSize"
          :total="pageInfo.total"
          :page-sizes="[2, 5, 10, 15]"
          @size-change="getList"
          layout="prev,pager,next,total,sizes"
          @current-change="getList"
        >
        </el-pagination>
      </div>
    </div>

    <!-- dialog -->
    <div>
      <div>
        <el-dialog v-model="cvisible" title="选择电影">
          <FilmComp @type-selected="selectedType" mode="selector"></FilmComp>
        </el-dialog>
      </div>

      <!-- add's dialog -->
      <div>
        <el-dialog v-model="avisible" title="添加电影排片" @closed="colseAdd">
          <div>
            <el-form>
              <el-form-item>
                <el-button v-model="addInfo.mid" @click="cvisible = true">
                  {{ btnAdd }}
                </el-button>
              </el-form-item>

              <el-form-item>
                <el-input v-model="addInfo.hall" placeholder="请输入播放大厅名称"></el-input>
              </el-form-item>

              <el-form-item>
                <el-date-picker
                  type="datetime"
                  placeholder="请选择日期"
                  v-model="addInfo.startTime"
                  format="YYYY-MM-DD hh:mm:ss"
                  value-format="YYYY-MM-DD hh:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>

          <template #footer>
            <el-button type="success" @click="add">确定</el-button>
            <el-button type="danger" @click="showadd">重置</el-button>
          </template>
        </el-dialog>
      </div>

      <!-- modify's dialog -->
      <div>
        <el-dialog v-model="mvisible" title="修改电影排片">
          <div>
            <el-form>
              <el-form-item>
                <el-button v-model="modifyInfo.mid" @click="cvisible = true">
                  {{ modifybtntext }}
                </el-button>
              </el-form-item>

              <el-form-item>
                <el-input v-model="modifyInfo.hall" placeholder="请输入播放大厅名称"></el-input>
              </el-form-item>

              <el-form-item>
                <el-date-picker
                  type="datetime"
                  placeholder="请选择日期"
                  v-model="modifyInfo.startTime"
                  format="YYYY-MM-DD hh:mm:ss"
                  value-format="YYYY-MM-DD hh:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>

          <template #footer>
            <el-button type="warning" @click="modify">确定</el-button>
            <el-button type="danger" @click="mvisible = false">取消</el-button>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import UserInfoComp from '@/components/UserInfoComp.vue'
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'
import FilmComp from '@/components/FilmComp.vue'

//#region 获取数据
const searchInfo = ref({
  date: '',
  mid: '',
})
const pageInfo = ref({
  pageSize: 10,
  pageNumber: 1,
})
const filmPlayList = ref([])

const getList = () => {
  api.get(
    `/crud/moviescheduling/${pageInfo.value.pageSize}/${pageInfo.value.pageNumber}`,
    searchInfo.value,
    (data) => {
      if (data.success) {
        pageInfo.value = data.data.pageBean
        filmPlayList.value = data.data.data
        return
      }
      ElMessageBox.alert(data.message, '电影排片查询失败')
    },
  )
}
onMounted(() => {
  getList()
})

// search button
const btnFilmSelect = ref('请选择电影')
const filmSelect = () => {
  typemode.value = 'search'
  cvisible.value = true
  if (searchInfo.value.mid == '') {
    btnFilmSelect.value = '请选择电影'
  } else {
    btnFilmSelect.value = type.value.title
  }
  // btnFilmSelect.value = '请选择电影'
}

// search
const search = () => {
  pageInfo.value.pageNumber = 1
  getList()
}

const reseet = () => {
  searchInfo.value = {
    date: '',
    mid: '',
  }
  btnFilmSelect.value = '请选择电影'
  pageInfo.value.pageNumber = 1
  getList()
}

//#endregion

//#region 添加
const avisible = ref(false)
const btnAdd = ref('请选择电影')
const addInfo = ref({
  hall: '',
  startTime: '',
  mid: -1,
})
const showadd = () => {
  typemode.value = 'add'
  addInfo.value = {
    hall: '',
    startTime: '',
    mid: -1,
  }
  avisible.value = true
  btnAdd.value = '请选择电影'
}
const closeadd = () => {
  addInfo.value = {
    hall: '',
    startTime: '',
    mid: -1,
  }
  avisible.value = false
  btnAdd.value = '请选择电影'
}
const add = () => {
  api.post('/crud/moviescheduling', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      closeadd()
      search()
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}
//#endregion

//#region 修改
const mvisible = ref(false)
const modifybtntext = ref({})
const modifyInfo = ref({
  msid: -1,
  mid: -1,
  hall: '',
  startTime: '',
})
const showmodify = (info) => {
  console.log(info)
  typemode.value = 'modify'
  modifyInfo.value = tools.mergeJson(info)
  modifybtntext.value = info.movie.title
  modifyInfo.value.startTime = tools.formatDate(info.startTime)
  mvisible.value = true
}

const modify = () => {
  api.put('/crud/moviescheduling', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      mvisible.value = false
      search()
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}
//#endregion

//#region 删除
const del = (info) => {
  ElMessageBox.alert(`是否要删除: ${info.movie.title} 吗?`, '删除电影排片', {
    type: 'warning',
  })
    .then(() => {
      api.delete(`/crud/moviescheduling/${info.msid}`, {}, (data) => {
        ElMessage({
          message: data.message,
          type: data.success ? 'success' : 'error',
        })
        search()
      })
    })
    .catch(() => {})
}
//#endregion

//#region 对话框的部分-软件类型选择
const cvisible = ref(false)
const type = ref({})
const typemode = ref('add')

const selectedType = (typeinfo) => {
  type.value = typeinfo
  if (typemode.value == 'search') {
    searchInfo.value.mid = typeinfo.mid
    btnFilmSelect.value = typeinfo.title
  } else if (typemode.value == 'add') {
    addInfo.value.mid = typeinfo.mid
    btnAdd.value = typeinfo.title
  } else if (typemode.value == 'modify') {
    modifyInfo.value.mid = typeinfo.mid
    modifybtntext.value = typeinfo.title
  }
  cvisible.value = false
}

//#endregion
</script>

<style scoped></style>
